<template>
    <div>
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <ul>
                    <li v-for="filter in filterList">
                        <div class="left">
                            <img :src="filter.img" alt="">
                        </div>
                        <div class="right">
                            <span class="food-name">{{ filter.name }}</span>
                            <span class="food-tag">{{ filter.burdens }}</span>
                            <span class="food-content">{{ filter.favorites }}收藏 {{ filter.all_click }}浏览</span>
                        </div>
                    </li>
                </ul>
            </van-list>
        </van-pull-refresh>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'


onMounted(() => {
    axios.get('http://localhost:9000/list')
        .then(response => {
            list.value = response.data.data;
            filterList.value = list.value.slice(0, 10);
            maxPage.value = Math.ceil(list.value.length / 10);
            page.value = 1;
        })
})

const list = ref([]);
const filterList = ref([]);

const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);
const page = ref(0);
const maxPage = ref(0);

const onLoad = () => {
    setTimeout(() => {
        if (refreshing.value) {
            filterList.value = [];
            page.value = 1;
            filterList.value = list.value.slice(0, 10);
            refreshing.value = false;
        } else {  
            page.value++;
            filterList.value = filterList.value.concat(list.value.slice((page.value - 1)* 10, (page.value - 1)* 10 + 10));
        }

        loading.value = false;

        if (page.value >= maxPage.value) {
            finished.value = true;
        }
    }, 1000);
};

const onRefresh = () => {
    // 清空列表数据
    finished.value = false;

    // 重新加载数据
    // 将 loading 设置为 true，表示处于加载状态
    loading.value = true;
    refreshing.value = true;
    // console.log('onRefresh');
    
    onLoad();
};

</script>

<style lang="scss" scoped>
@import "@/assets/border.scss";

div {
    ul {
        li {
            display: flex;
            align-items: center;
            @include border(0 0 1px 0);

            .left {
                padding: 10px;

                img {
                    width: 110px;
                    height: 70px;
                    // height: 100px;
                }
            }

            .right {
                display: flex;
                flex-direction: column;
                justify-content: center;

                .food-name {
                    font-size: 18px;
                    font-weight: 600;
                }

                .food-tag,
                .food-content {
                    font-size: 14px;
                    color: #999;
                }

                span {
                    margin-right: 10px;
                    display: block;
                    width: 100%;
                    display: -webkit-box; //对象作为弹性伸缩盒子模型显示
                    overflow: hidden; //溢出隐藏
                    -webkit-box-orient: vertical; //设置伸缩盒子对象的子元素的排列方式
                    -webkit-line-clamp: 1; //设置 块元素包含的文本行数
                }
            }
        }
    }
}
</style>